<template>
  <div class="consumption-report">
    <!-- 消费指标 -->
    <el-row :gutter="20" class="stat-row">
      <el-col :span="6">
        <el-statistic title="总消费金额" :value="totalAmount" prefix="¥" :precision="2" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="总订单数" :value="totalOrders" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="客单价" :value="avgOrderValue" prefix="¥" :precision="2" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="消费会员数" :value="consumptionMembers" />
      </el-col>
    </el-row>

    <!-- 消费排行 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>🏆 消费排行榜 TOP 20</span>
          </template>
          <el-table :data="topConsumers" max-height="400">
            <el-table-column type="index" label="排名" width="60">
              <template #default="{ $index }">
                <div class="rank-badge" :class="'rank-' + ($index + 1)">
                  {{ $index + 1 }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="memberName" label="会员姓名" width="120" />
            <el-table-column prop="level" label="等级" width="100">
              <template #default="{ row }">
                <el-tag size="small">{{ row.level }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="amount" label="消费金额" width="120">
              <template #default="{ row }">
                <span style="color: #f56c6c; font-weight: bold;">¥{{ row.amount.toLocaleString() }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="orders" label="订单数" width="80" />
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card>
          <template #header>
            <span>📊 消费区间分布</span>
          </template>
          <div class="chart-container" ref="consumptionDistChart"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 消费趋势 -->
    <el-card style="margin-top: 20px;">
      <template #header>
        <span>📈 消费趋势分析</span>
      </template>
      <div class="chart-container" style="height: 400px;" ref="consumptionTrendChart"></div>
    </el-card>

    <!-- 消费明细 -->
    <el-card style="margin-top: 20px;">
      <template #header>
        <span>📋 消费明细数据</span>
      </template>
      <el-table :data="consumptionDetails" border stripe>
        <el-table-column prop="memberName" label="会员姓名" width="120" />
        <el-table-column prop="phone" label="手机号" width="130" />
        <el-table-column prop="level" label="等级" width="100" />
        <el-table-column prop="totalAmount" label="累计消费" width="120">
          <template #default="{ row }">
            ¥{{ row.totalAmount.toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column prop="totalOrders" label="订单数" width="100" />
        <el-table-column prop="avgOrderValue" label="客单价" width="100">
          <template #default="{ row }">
            ¥{{ row.avgOrderValue }}
          </template>
        </el-table-column>
        <el-table-column prop="lastConsumption" label="最后消费" width="160" />
        <el-table-column prop="frequency" label="消费频率" width="120">
          <template #default="{ row }">
            {{ row.frequency }}次/月
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  dateRange: { type: Array, default: () => [] }
})

const totalAmount = ref(15678900)
const totalOrders = ref(54321)
const avgOrderValue = ref(288.65)
const consumptionMembers = ref(32456)

const topConsumers = ref([
  { memberName: '张三', level: '钻石会员', amount: 125678, orders: 234 },
  { memberName: '李四', level: '金卡会员', amount: 98765, orders: 189 },
  { memberName: '王五', level: '金卡会员', amount: 87654, orders: 167 }
])

const consumptionDetails = ref([
  { memberName: '张三', phone: '13800138001', level: '钻石会员', totalAmount: 125678, totalOrders: 234, avgOrderValue: 537, lastConsumption: '2024-01-20', frequency: 3.2 },
  { memberName: '李四', phone: '13800138002', level: '金卡会员', totalAmount: 98765, totalOrders: 189, avgOrderValue: 522, lastConsumption: '2024-01-19', frequency: 2.8 }
])

const consumptionDistChart = ref(null)
const consumptionTrendChart = ref(null)

onMounted(() => {
  initConsumptionDistChart()
  initConsumptionTrendChart()
})

const initConsumptionDistChart = () => {
  const chart = echarts.init(consumptionDistChart.value)
  chart.setOption({
    tooltip: { trigger: 'item' },
    series: [
      {
        name: '消费区间',
        type: 'pie',
        radius: '60%',
        data: [
          { value: 45678, name: '0-1000元' },
          { value: 32456, name: '1000-5000元' },
          { value: 12345, name: '5000-10000元' },
          { value: 5678, name: '10000-50000元' },
          { value: 1234, name: '50000元以上' }
        ]
      }
    ]
  })
}

const initConsumptionTrendChart = () => {
  const chart = echarts.init(consumptionTrendChart.value)
  chart.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['消费金额', '订单数', '客单价'] },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
    },
    yAxis: [
      { type: 'value', name: '金额(万元)/订单数' },
      { type: 'value', name: '客单价(元)' }
    ],
    series: [
      {
        name: '消费金额',
        type: 'bar',
        data: [156, 178, 189, 165, 198, 212, 234]
      },
      {
        name: '订单数',
        type: 'line',
        data: [5432, 6123, 6456, 5890, 6789, 7234, 7890]
      },
      {
        name: '客单价',
        type: 'line',
        yAxisIndex: 1,
        data: [287, 291, 293, 280, 292, 293, 296]
      }
    ]
  })
}
</script>

<style scoped>
.consumption-report {
  padding: 20px 0;
}

.stat-row {
  padding: 20px;
  background: white;
  border-radius: 8px;
}

.rank-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  margin: 0 auto;
}

.rank-1 {
  background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
}

.rank-2 {
  background: linear-gradient(135deg, #c0c0c0 0%, #8e9eab 100%);
}

.rank-3 {
  background: linear-gradient(135deg, #cd7f32 0%, #8b4513 100%);
}

.chart-container {
  height: 350px;
}
</style>

